import { View, Image, Text } from '@tarojs/components'
import './CategoryGrid.scss'

interface CategoryItem {
  id: number
  name: string
  icon: string
}

interface CategoryTabsProps {
  categories: CategoryItem[]
  activeId: number
  onChange: (id: number) => void
  className?: string
}

export default function CategoryTabs({ categories, activeId, onChange, className = '' }: CategoryTabsProps) {
  return (
    <View className={`category-grid ${className}`}> {/* 复用category-grid样式 */}
      {categories.map(item => (
        <View
          className={`category-grid__item${item.id === activeId ? ' active' : ''}`}
          key={item.id}
          onClick={() => onChange(item.id)}
          style={{ cursor: 'pointer' }}
        >
          <Image className='category-grid__icon' src={item.icon} />
          <Text className='category-grid__text'>{item.name}</Text>
        </View>
      ))}
    </View>
  )
} 